<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .content {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }

      .content__item {
        border-bottom: 1px solid orangered;
        height: 20vh;
        background-color: lightblue;
        transform: all 0.3s;
      }

      .tips {
          position: absolute;
          top: -10vw;
          left: 0;
          width: 100vw;
        text-align: center;
        height: 20vw;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="content">
        <div class="content__wrapper"></div>
      </div>
    </div>
    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <script>
      var currentNum = 6;
      var flag = false;
      var contentWrap = document.querySelector(".content__wrapper");
      var tips = document.createElement("div");
      tips.className = "tips";
      tips.innerText = "更新中....";

      var pullTips = document.createElement("div");
      pullTips.className = "tips";
      pullTips.innerText = "释放更新....";

    var timeFormat = 'YYYY-MM-DD HH:mm:ss'

      function update() {
        var contentItems = document.querySelectorAll(".content__item");
        for (var i = 0; i < contentItems.length; i++) {
          //   contentItems[i].innerText = new Date();
          contentItems[i].innerText = dayjs().format(timeFormat);
        }
      }

      loadMore(10)

      function loadMore(num=5) {
        for (var i = 0; i < num; i++) {
          var item = document.createElement("div");
          item.className = "content__item";
          //   item.innerText = new Date();
          item.innerText = dayjs().format(timeFormat);

          contentWrap.appendChild(item);
        }
      }

      var bs = BetterScroll.createBScroll(".content", {
        pullDownRefresh: {
          threshold: 50,
        },
        pullUpLoad: {
          threshold: 30,
        },
      });

      bs.on("pullingDown", function () {
        console.log("开始下拉了！");
        contentWrap.removeChild(pullTips);
          contentWrap.insertBefore(tips, contentWrap.children[0])
        setTimeout(function () {
          console.log("更新结束");
          update();
          bs.finishPullDown();
          contentWrap.removeChild(tips);
        }, 1000);
      });

      bs.on("enterThreshold", function () { 
        contentWrap.insertBefore(pullTips, contentWrap.children[0]);
      });


      bs.on("pullingUp", function () {
        console.log("开始上拉了！");

        setTimeout(function () {
          console.log("加载结束");
          loadMore();
          bs.refresh();

          bs.finishPullUp();
        }, 300);
      });
    </script>
  </body>
</html>
